<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>交流中心</title>
<link rel="stylesheet" type="text/css" href="../static/css/common.css"/>
<link rel="stylesheet" type="text/css" href="../static/css/chat2.css"/>
<link rel="stylesheet" type="text/css" href="../static/css/chat2-en.css"/>
<link rel="stylesheet" type="text/css" href="../static/css/jquery.jscrollpane-2.css"/>
<script type="text/javascript" src="../static/js/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="../static/js/vchat2.js"></script>
<script type="text/javascript" src="../static/js/jquery.mousewheel.js"></script>
<script type="text/javascript" src="../static/js/jquery.jscrollpane.min.js"></script>

</head>

<body class="bg en">
<button id="userJoin" style="position:absolute; left:10px; top:40px; width:120px;">用户加入</button>
<button id="adminJoin" style="position:absolute; left:10px; top:70px; width:120px;">管理员加入</button>
<button id="userExit" style="position:absolute; left:10px; top:100px; width:120px;">用户退出</button>
<button id="adminExit" style="position:absolute; left:10px; top:130px; width:120px;">管理员退出</button>
<div class="wrap">
	<div class="container">
		<div class="main">
            <a class="win-close-btn" href="javascript:;"></a>
			<div class="chat-left">
                <div class="participant-list-wrap">
                    <div class="participant-list-t">
                        <span>Participants</span><em class="u-num">7</em>
                    </div>
                    <div id="participantList" class="participant-list">
                        <ul>
                            <li>
                                <span class="admin-icon"></span>
                                <a class="name role-admin" href="javascript:;">Administrator</a>
                                <span class="camera-icon"></span>
                            </li>
                            <li>
                                <a class="name" href="javascript:;">哈哈哈哈</a>
                            </li>
                            <li>
                                <a class="name" href="javascript:;">Jim.Green</a>
                                <span class="camera-icon"></span>
                            </li>
                            <li>
                                <a class="name" href="javascript:;">Mike Zhang</a>
                                <span class="mic-icon"></span>
                            </li>
                            <li>
                                <a class="name" href="javascript:;">Clark Tang</a>
                                <span class="h-camera-icon"></span>
                            </li>
                            <li>
                                <a class="name" href="javascript:;">Meimei.Han</a>
                                <span class="h-mic-icon"></span>
                            </li>
                            <li>
                                <a class="name" href="javascript:;">罗永浩</a>
                                <span class="camera-icon"></span>
                            </li>
                            <li>
                                <a class="name" href="javascript:;">刘铁牛</a>
                            </li>
                            <li>
                                <a class="name" href="javascript:;">Tony Stark</a>
                                <span class="camera-icon"></span>
                            </li>
                            <li>
                                <a class="name" href="javascript:;">王自如</a>
                                <span class="mic-icon"></span>
                            </li>
                            <li>
                                <a class="name" href="javascript:;">崔成浩</a>
                            </li>
                            <li>
                                <a class="name" href="javascript:;">Nicke G.L</a>
                                <span class="camera-icon"></span>
                            </li>
                            <li>
                                <a class="name" href="javascript:;">Daisy Yan</a>
                            </li>
                            <li>
                                <a class="name" href="javascript:;">Feil Wang</a>
                            </li>
                            <li>
                                <a class="name" href="javascript:;">Tony Stark</a>
                                <span class="camera-icon"></span>
                            </li>
                            <li>
                                <a class="name" href="javascript:;">王自如</a>
                                <span class="mic-icon"></span>
                            </li>
                            <li>
                                <a class="name" href="javascript:;">Nicke G.L</a>
                                <span class="camera-icon"></span>
                            </li>
                            <li>
                                <a class="name" href="javascript:;">Feil Wang !!!!!!</a>
                            </li>
                        </ul>
                    </div>
                </div>
                <div class="vchat-disp-wrap">
                    <div id="vchatDispTop" class="v-disp-item">
                        <div class="vchat-window">
                            <img src="../static/images/video-default-bg-2.jpg">
                            <div class="u-name" title="Toni Gemayel"><span>Toni Gemayel</span></div>
                        </div>
                    </div>
                    <div id="vchatDispBottom" class="v-disp-item">
                        <div class="vchat-window">
                            <img src="../static/images/videouser1.jpg" width="268">
                            <div class="u-name" title="Sean Farrell"><em class="admin-icon"></em><span>Sean Farrell</span></div>
                        </div>
                    </div>
                </div>
                <div class="request-area">
                    <a class="vchat-btn close-voice" href="javascript:;"></a>
                    <a class="vchat-btn cancel-video" href="javascript:;"></a>
                </div>
			</div>
            <div class="chat-right">
                <div class="img-area">
                    <div class="top-layer">
                        <a class="logo" href="http://www.gensee.com/" target="_blank">
                            <img src="../static/images/v-logo-2.png" />
                        </a>
                        <h3>The American University of Rome</h3>
                        <div class="status">
                            <!--已连接class：connected、未连接class：unconnect-->
                            Status :  <span class="connected">Connected</span>
                        </div>
                        <a id="chatAreaSizeBtn" class="arrow-switch" href="javascript:;" title="收起图片"></a>
                    </div>
                    <div class="banner-img">
                     <img id="bannerImg" src="../static/images/pic-1.jpg"  height="300" />
                    </div>
                    <div class="forecast-scroll">
                        <ul class="forecast-list">
                            <li>1. 主题：<span>第五届中国人力资源博览会(1)</span>主讲人：<span>赵新风</span>时间：<span>2013-12-07 09:00</span></li>
                            <li>2. 主题：<span>第五届中国人力资源博览会(2)</span>主讲人：<span>赵新风</span>时间：<span>2013-12-07 09:00</span></li>
                            <li>3. 主题：<span>第五届中国人力资源博览会(3)</span>主讲人：<span>赵新风</span>时间：<span>2013-12-07 09:00</span></li>
                            <li>4. 主题：<span>第五届中国人力资源博览会(4)</span>主讲人：<span>赵新风</span>时间：<span>2013-12-07 09:00</span></li>
                            <li>5. 主题：<span>第五届中国人力资源博览会(5)</span>主讲人：<span>赵新风</span>时间：<span>2013-12-07 09:00</span></li>
                        </ul>
                    </div>
                </div>
                <div id="tchatArea" class="text-chat-wrap">
                    <div class="text-chat-main">
                        <div id="chatListWrap">
                            <ul id="chatMsgList" class="chat-msg-list">
                                <li class="odd role-admin">
                                    <div class="u-avatar">
                                        <img src="../static/images/u-avatar.png" />
                                        <a class="e-vcard" href="javascript:;"></a>
                                    </div>
                                    <dl>
                                        <dt>Administrator</dt>
                                        <dd>what do you want to talk about?  how people are reading this co</dd>
                                    </dl>
                                </li>
                                <li class="role-myself">
                                    <div class="u-avatar">
                                        <img src="../static/images/u-avatar.png" />
                                        <a class="e-vcard" href="javascript:;"></a>
                                    </div>
                                    <dl>
                                        <dt>我对<span class="other-name">所有人</span>说</dt>
                                        <dd>what do you want to talk about?  how people are reading this co</dd>
                                    </dl>
                                </li>
                                <li class="odd">
                                    <div class="u-avatar">
                                        <img src="../static/images/u-avatar.png" />
                                        <a class="e-vcard" href="javascript:;"></a>
                                    </div>
                                    <dl>
                                        <dt>Sean Farrell</dt>
                                        <dd>what do you want to talk about?  how people are reading thiswhat do you want to talk about?  how people are reading thiswhat do you want to talk about?  how people are reading this co</dd>
                                    </dl>
                                </li>
                                <li>
                                    <div class="u-avatar">
                                        <img src="../static/images/u-avatar.png" />
                                        <a class="e-vcard" href="javascript:;"></a>
                                    </div>
                                    <dl>
                                        <dt>Sean Farrell</dt>
                                        <dd>what do you want to talk about?  how people are reading thiswhat do you want to talk about?  how people are reading thiswhat do you want to talk about?  how people are reading this co</dd>
                                    </dl>
                                </li>
                                <li class="odd">
                                    <div class="u-avatar">
                                        <img src="../static/images/u-avatar.png" />
                                        <a class="e-vcard" href="javascript:;"></a>
                                    </div>
                                    <dl>
                                        <dt>Sean Farrell</dt>
                                        <dd>what do you want to talk about?  how people are reading this co</dd>
                                    </dl>
                                </li>
                                <li class="role-myself">
                                    <div class="u-avatar">
                                        <img src="../static/images/u-avatar.png" />
                                        <a class="e-vcard" href="javascript:;"></a>
                                    </div>
                                    <dl>
                                        <dt>Sean Farrell</dt>
                                        <dd>what do you want to talk about?  how people are reading this co</dd>
                                    </dl>
                                </li>
                                <li class="odd">
                                    <div class="u-avatar">
                                        <img src="../static/images/u-avatar.png" />
                                        <a class="e-vcard" href="javascript:;"></a>
                                    </div>
                                    <dl>
                                        <dt>Sean Farrell</dt>
                                        <dd>what do you want to talk about?  how people are reading thiswhat do you want to talk about?  how people are reading thiswhat do you want to talk about?  how people are reading this co</dd>
                                    </dl>
                                </li>
                                <li>
                                    <div class="u-avatar">
                                        <img src="../static/images/u-avatar.png" />
                                        <a class="e-vcard" href="javascript:;"></a>
                                    </div>
                                    <dl>
                                        <dt>Sean Farrell G11111111111</dt>
                                        <dd>what do you want to talk about?  how people are reading thiswhat do you want to talk about?  how people are reading thiswhat do you want to talk about?  how people are reading this co</dd>
                                    </dl>
                                </li>
                            </ul>
                        </div>
                    </div>
                    <div class="text-chat-btm">
                        <div class="text-chat-t">
                            <div id="selectChatUser" class="select-user">
                                <span id="selectedUser" class="cur-user" title="所有人">所有人</span>
                                <em class="arrow-icon"></em>
                                <div id="userListWrap" class="user-list-wrap">
                                    <div id="userList" class="user-list">
                                        <ul>
                                            <li><a href="javascript:;" title="所有人">所有人</a></li>
                                            <li><a class="c-red" href="javascript:;" title="Administrator">Administrator</a></li>
                                            <li><a href="javascript:;" title="哈哈哈哈">哈哈哈哈</a></li>
                                            <li><a href="javascript:;" title="Jim.Green">Jim.Green</a></li>
                                            <li><a href="javascript:;" title="Mike Zhang">Mike Zhang</a></li>
                                            <li><a href="javascript:;" title="Meimei.Han">Meimei.Han</a></li>
                                            <li><a href="javascript:;" title="罗永浩">罗永浩</a></li>
                                            <li><a href="javascript:;" title="刘铁牛">刘铁牛</a></li>
                                            <li><a href="javascript:;" title="Tony Stark">Tony Stark</a></li>
                                            <li><a href="javascript:;" title="王自如">王自如</a></li>
                                            <li><a href="javascript:;" title="崔成浩">崔成浩</a></li>
                                            <li><a href="javascript:;" title="Nicke G.L">Nicke G.L</a></li>
                                            <li><a href="javascript:;" title="Daisy Yan">Daisy Yan</a></li>
                                            <li><a href="javascript:;" title="Feil Wang">Feil Wang</a></li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                            <div class="text-controls">
                                <div class="text-style-item">
                                    <label>
                                        <input type="checkbox" id="underlinePost" class="ckbx">
                                        <span class="underline-icon"></span>
                                    </label>
                                </div>
                                <div class="text-style-item">
                                    <label>
                                        <input type="checkbox" id="boldPost" class="ckbx">
                                        <span class="bold-icon"></span>
                                    </label>
                                </div>
                                <div class="text-style-item">
                                    <label>
                                        <input type="checkbox" id="italicPost" class="ckbx">
                                        <span class="italic-icon"></span>
                                    </label>
                                </div>
                                <div class="text-color-wrap">
                                    <div id="selectColor" class="txt-cur-color" style=" background-color:rgb(0,0,0)"></div>
                                    <div class="t-arrow"></div>
                                    <div id="colorArea" class="text-color-container">
                                        <ul class="text-color-list">
                                            <li><a href="javascript:;" data-color="rgb(0, 0, 0)" title="rgb(0, 0, 0)" style="background-color:rgb(0, 0, 0);"></a></li>
                                            <li><a href="javascript:;" data-color="rgb(0, 0, 132)" title="rgb(0, 0, 132)" style="background-color:rgb(0, 0, 132);"></a></li>
                                            <li><a href="javascript:;" data-color="rgb(0, 0, 255)" title="rgb(0, 0, 255)" style="background-color:rgb(0, 0, 255);"></a></li>
                                            <li><a href="javascript:;" data-color="rgb(132, 0, 0)" title="rgb(132, 0, 0)" style="background-color:rgb(132, 0, 0);"></a></li>
                                            <li><a href="javascript:;" data-color="rgb(132, 0, 132)" title="rgb(132, 0, 132)" style="background-color:rgb(132, 0, 132);"></a></li>
                                            <li><a href="javascript:;" data-color="rgb(0, 130, 0)" title="rgb(0, 130, 0)" style="background-color:rgb(0, 130, 0);"></a></li>
                                            <li><a href="javascript:;" data-color="rgb(255, 0, 0)" title="rgb(255, 0, 0)" style="background-color:rgb(255, 0, 0);"></a></li>
                                            <li><a href="javascript:;" data-color="rgb(0, 130, 132)" title="rgb(0, 130, 132)" style="background-color:rgb(0, 130, 132);"></a></li>
                                            <li><a href="javascript:;" data-color="rgb(255, 0, 255)" title="rgb(255, 0, 255)" style="background-color:rgb(255, 0, 255);"></a></li>
                                            <li><a href="javascript:;" data-color="rgb(132, 130, 0)" title="rgb(132, 130, 0)" style="background-color:rgb(132, 130, 0);"></a></li>
                                            <li><a href="javascript:;" data-color="rgb(132, 130, 132)" title="rgb(132, 130, 132)" style="background-color:rgb(132, 130, 132);"></a></li>
                                            <li><a href="javascript:;" data-color="rgb(0, 255, 0)" title="rgb(0, 255, 0)" style="background-color:rgb(0, 255, 0);"></a></li>
                                            <li><a href="javascript:;" data-color="rgb(255, 166, 0)" title="rgb(255, 166, 0)" style="background-color:rgb(255, 166, 0);"></a></li>
                                            <li><a href="javascript:;" data-color="rgb(0, 255, 255)" title="rgb(0, 255, 255)" style="background-color:rgb(0, 255, 255);"></a></li>
                                            <li><a href="javascript:;" data-color="rgb(198, 195, 198)" title="rgb(198, 195, 198)" style="background-color:rgb(198, 195, 198);"></a></li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                            <div class="ask-only">
                                <label class="checkbox">
                                    <input type="checkbox" />
                                    Ask only
                                </label>
                            </div>
                        </div>
                        <div class="text-chat-b">
                            <textarea id="textInput" class="text-input"></textarea>
                            <a id="clearTextBtn" class="clear-text-btn" href="javascript:;" title="清空内容"></a>
                            <a id="submitMsgBtn" class="send-btn" href="javascript:;"></a>
                            <div class="clear"></div>
                        </div>
                    </div>
                </div>
            </div>
		</div>
	</div>
</div>
</body>
</html>
